<template>
  <div class="milestone-container">
    <div class="page-header">
      <h1>戒烟里程碑</h1>
      <p>查看您的戒烟目标和即将达成的里程碑</p>
    </div>

    <!-- 当前进度概览 -->
    <div class="progress-overview">
      <div class="progress-card">
        <div class="progress-content">
          <h2>当前戒烟进度</h2>
          <div class="current-stats">
            <div class="stat-item">
              <span class="stat-number">{{ currentDays }}</span>
              <span class="stat-label">天</span>
            </div>
            <div class="progress-info">
              <p>距离下一个里程碑还有 <strong>{{ daysToNext }}</strong> 天</p>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
              </div>
              <span class="progress-text">{{ progressPercentage.toFixed(1) }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 里程碑列表 -->
    <div class="milestone-section">
      <h2>里程碑目标</h2>
      
      <div class="milestone-grid">
        <div
          v-for="milestone in milestones"
          :key="milestone.id"
          :class="[
            'milestone-card',
            {
              'achieved': milestone.achieved,
              'current': milestone.isCurrent,
              'upcoming': milestone.isUpcoming
            }
          ]"
        >
          <div class="milestone-icon">
            <span v-if="milestone.achieved" class="icon-check">✓</span>
            <span v-else-if="milestone.isCurrent" class="icon-current">🎯</span>
            <span v-else class="icon-lock">🔒</span>
          </div>
          
          <div class="milestone-content">
            <h3>{{ milestone.name }}</h3>
            <p class="milestone-description">{{ milestone.description }}</p>
            
            <div class="milestone-meta">
              <span class="milestone-days">{{ milestone.days }} 天</span>
              <span v-if="milestone.achieved" class="achievement-date">
                {{ formatDate(milestone.achieved_date) }}
              </span>
              <span v-else-if="milestone.isCurrent" class="days-left">
                还需 {{ milestone.days - currentDays }} 天
              </span>
            </div>
            
            <div v-if="milestone.reward_message" class="reward-message">
              <span class="reward-icon">🎉</span>
              {{ milestone.reward_message }}
            </div>
          </div>
          
          <div v-if="milestone.achieved" class="achievement-badge">
            <span class="badge-icon">🏆</span>
            <span class="badge-text">已达成</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 成就统计 -->
    <div class="achievement-stats">
      <h2>成就统计</h2>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">🏆</div>
          <div class="stat-content">
            <h3>{{ achievedCount }}</h3>
            <p>已达成里程碑</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">🎯</div>
          <div class="stat-content">
            <h3>{{ upcomingCount }}</h3>
            <p>即将达成</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">📊</div>
          <div class="stat-content">
            <h3>{{ Math.round(achievementRate) }}%</h3>
            <p>完成率</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 激励信息 -->
    <div class="motivation-section">
      <div class="motivation-card">
        <h2>坚持就是胜利！</h2>
        <div class="motivation-content">
          <div class="motivation-text">
            <p v-if="nextMilestone">
              距离"<strong>{{ nextMilestone.name }}</strong>"还有 
              <span class="highlight">{{ daysToNext }}</span> 天！
            </p>
            <p v-else>
              恭喜您已经达成了所有预设的里程碑！继续保持健康的生活方式。
            </p>
          </div>
          
          <div class="motivation-actions">
            <button @click="shareAchievement" class="share-btn">
              分享成就
            </button>
            <button @click="viewHealthTips" class="tips-btn">
              查看建议
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 提示信息 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <div v-if="successMessage" class="success-message">
      {{ successMessage }}
    </div>
  </div>
</template>

<script>
import { milestoneApi, userMilestoneApi } from '../api/index.js'

export default {
  name: 'MilestoneView',
  data() {
    return {
      milestones: [],
      userMilestones: [],
      currentDays: 6,
      loading: false,
      error: '',
      successMessage: ''
    }
  },

  computed: {
    achievedMilestones() {
      return this.milestones.filter(m => m.achieved)
    },

    achievedCount() {
      return this.achievedMilestones.length
    },

    upcomingCount() {
      return this.milestones.filter(m => !m.achieved && m.days <= this.currentDays + 30).length
    },

    achievementRate() {
      if (this.milestones.length === 0) return 0
      return (this.achievedCount / this.milestones.length) * 100
    },

    nextMilestone() {
      return this.milestones.find(m => !m.achieved && m.days > this.currentDays)
    },

    daysToNext() {
      return this.nextMilestone ? this.nextMilestone.days - this.currentDays : 0
    },

    progressPercentage() {
      if (!this.nextMilestone) return 100
      const previousMilestone = [...this.milestones]
        .filter(m => m.days <= this.currentDays)
        .sort((a, b) => b.days - a.days)[0]
      
      const startDays = previousMilestone ? previousMilestone.days : 0
      const totalDays = this.nextMilestone.days - startDays
      const currentProgress = this.currentDays - startDays
      
      return Math.min((currentProgress / totalDays) * 100, 100)
    }
  },

  async mounted() {
    await this.loadData()
  },

  methods: {
    async loadData() {
      this.loading = true
      this.error = ''
      
      try {
        await Promise.all([
          this.loadMilestones(),
          this.loadUserMilestones()
        ])
        
        this.processMilestones()
        
      } catch (error) {
        console.error('加载数据失败:', error)
        this.error = '加载数据失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },

    async loadMilestones() {
      console.log('加载里程碑数据...')
      await new Promise(resolve => setTimeout(resolve, 800))
      
      // 为 MilestoneView 添加不同的假数据
      this.milestones = [
        {
          id: 1,
          name: '戒烟第1天',
          days: 1,
          description: '恭喜你开始戒烟之旅！这是最重要的第一步。',
          reward_message: '今天是你新生活的开始！'
        },
        {
          id: 2,
          name: '戒烟第3天',
          days: 3,
          description: '度过最难熬的前三天，身体开始适应无烟状态。',
          reward_message: '你已经度过了最困难的时期！'
        },
        {
          id: 3,
          name: '戒烟1周',
          days: 7,
          description: '一周无烟生活，体内的尼古丁已基本清除。',
          reward_message: '坚持一周了，你的意志力真强大！'
        },
        {
          id: 4,
          name: '戒烟2周',
          days: 14,
          description: '两周无烟，血液循环开始改善。',
          reward_message: '你的身体正在感谢你的决定！'
        },
        {
          id: 5,
          name: '戒烟1个月',
          days: 30,
          description: '一个月无烟生活，肺功能开始改善。',
          reward_message: '太棒了！你的肺部开始恢复健康！'
        },
        {
          id: 6,
          name: '戒烟3个月',
          days: 90,
          description: '三个月无烟生活，呼吸更顺畅。',
          reward_message: '你的呼吸更加清新了！'
        },
        {
          id: 7,
          name: '戒烟6个月',
          days: 180,
          description: '半年无烟，心脏病风险显著降低。',
          reward_message: '你的心脏在感谢你！'
        },
        {
          id: 8,
          name: '戒烟1年',
          days: 365,
          description: '一年无烟生活，心脏病风险降低50%。',
          reward_message: '恭喜！你已经是一个全新的自己！'
        }
      ]
    },

    async loadUserMilestones() {
      console.log('加载用户成就数据...')
      await new Promise(resolve => setTimeout(resolve, 600))
      
      // 为 MilestoneView 添加不同的用户成就假数据
      this.userMilestones = [
        {
          id: 1,
          milestone_id: 1,
          achieved_date: '2024-09-01T09:00:00'
        },
        {
          id: 2,
          milestone_id: 2,
          achieved_date: '2024-09-03T10:30:00'
        }
      ]
    },

    processMilestones() {
      this.milestones = this.milestones.map(milestone => {
        const userMilestone = this.userMilestones.find(
          um => um.milestone_id === milestone.id
        )
        
        return {
          ...milestone,
          achieved: !!userMilestone,
          achieved_date: userMilestone?.achieved_date,
          isCurrent: !userMilestone && milestone.days > this.currentDays && 
                    (this.milestones.find(m => m.days > this.currentDays && !this.userMilestones.find(um => um.milestone_id === m.id))?.id === milestone.id),
          isUpcoming: !userMilestone && milestone.days > this.currentDays
        }
      }).sort((a, b) => a.days - b.days)
    },

    shareAchievement() {
      const shareText = `我已经成功戒烟${this.currentDays}天了！已达成${this.achievedCount}个里程碑。`
      
      if (navigator.share) {
        navigator.share({
          title: '我的戒烟成就',
          text: shareText
        })
      } else {
        navigator.clipboard.writeText(shareText)
        this.successMessage = '已复制到剪贴板，可以分享给朋友了！'
        setTimeout(() => {
          this.successMessage = ''
        }, 3000)
      }
    },

    viewHealthTips() {
      this.$router.push('/health-tips')
    },

    formatDate(dateString) {
      if (!dateString) return ''
      return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.milestone-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #faf0ff 0%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 添加漂浮装饰元素 */
.milestone-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 198, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(180, 248, 200, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 209, 220, 0.2) 4px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(162, 210, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255, 175, 204, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255, 209, 220, 0.2) 3px, transparent 3px);
  background-size: 200px 200px;
  z-index: 0;
}

.milestone-container > * {
  position: relative;
  z-index: 1;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  animation: slideInDown 0.8s ease-out;
}

.page-header h1 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.page-header p {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.progress-overview {
  margin-bottom: 40px;
}

.progress-card {
  background: linear-gradient(135deg, #A2D2FF 0%, #CDB4DB 100%);
  color: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(162, 210, 255, 0.4);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.6s ease-out;
}

.progress-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  transform: rotate(30deg);
}

.progress-content h2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.current-stats {
  display: flex;
  align-items: center;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 16px;
  opacity: 0.9;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.progress-info {
  flex: 1;
  max-width: 300px;
}

.progress-info p {
  margin-bottom: 15px;
  font-size: 16px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.progress-fill {
  height: 100%;
  background: #B4F8C8;
  border-radius: 8px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(180, 248, 200, 0.5);
}

.progress-text {
  font-size: 14px;
  opacity: 0.9;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.milestone-section {
  margin-bottom: 40px;
}

.milestone-section h2 {
  color: #444444;
  margin-bottom: 25px;
  text-align: center;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.milestone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.milestone-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  position: relative;
  border: 2px solid #A2D2FF;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
}

.milestone-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.milestone-card.achieved {
  border-color: #B4F8C8;
  background: rgba(240, 255, 244, 0.9);
}

.milestone-card.achieved::after {
  background: linear-gradient(90deg, #B4F8C8, #94e8a8);
}

.milestone-card.current {
  border-color: #FFD1DC;
  background: rgba(255, 240, 245, 0.9);
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(255, 209, 220, 0.4);
  animation: pulse 2s infinite;
}

.milestone-card.current::after {
  background: linear-gradient(90deg, #FFD1DC, #FFAFCC);
}

.milestone-card.upcoming {
  border-color: #CDB4DB;
  background: rgba(245, 240, 255, 0.9);
}

.milestone-card.upcoming::after {
  background: linear-gradient(90deg, #CDB4DB, #A2D2FF);
}

.milestone-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.milestone-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icon-check {
  background: #B4F8C8;
  color: white;
  font-weight: bold;
}

.icon-current {
  background: #FFD1DC;
  color: white;
  animation: bounce 1s ease infinite;
}

.icon-lock {
  background: #e0e0e0;
  color: #999;
}

.milestone-content h3 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 20px;
  padding-right: 60px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.milestone-description {
  color: #666666;
  margin-bottom: 15px;
  line-height: 1.5;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.milestone-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.milestone-days {
  background: #f8f9fa;
  color: #495057;
  padding: 6px 12px;
  border-radius: 15px;
  font-weight: 500;
}

.achievement-date {
  color: #B4F8C8;
  font-weight: 500;
}

.days-left {
  color: #FFD1DC;
  font-weight: 500;
}

.reward-message {
  background: rgba(180, 248, 200, 0.2);
  color: #2e8b57;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  border: 1px dashed #B4F8C8;
}

.reward-icon {
  font-size: 16px;
}

.achievement-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background: #B4F8C8;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 10px rgba(180, 248, 200, 0.4);
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  z-index: 2;
}

.achievement-stats {
  margin-bottom: 40px;
}

.achievement-stats h2 {
  color: #444444;
  margin-bottom: 25px;
  text-align: center;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: center;
  border: 2px solid #A2D2FF;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation: slideInUp 0.8s ease-out;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  border: 2px solid #A2D2FF;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(162, 210, 255, 0.3);
}

.stat-content h3 {
  font-size: 24px;
  font-weight: 500;
  color: #444444;
  margin: 0 0 5px 0;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.stat-content p {
  color: #888888;
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.motivation-section {
  margin-bottom: 40px;
}

.motivation-card {
  background: linear-gradient(135deg, #FFD1DC 0%, #A2D2FF 100%);
  border-radius: 20px;
  padding: 30px;
  color: #444444;
  box-shadow: 0 8px 25px rgba(255, 209, 220, 0.4);
  border: 2px solid #FFD1DC;
  position: relative;
  overflow: hidden;
  animation: slideInUp 1s ease-out;
}

.motivation-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  transform: rotate(30deg);
}

.motivation-card h2 {
  color: #444444;
  margin-bottom: 20px;
  text-align: center;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.motivation-content {
  display: flex;
  align-items: center;
  gap: 30px;
}

.motivation-text {
  flex: 1;
}

.motivation-text p {
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 1.6;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.highlight {
  color: #d63384;
  font-weight: bold;
  font-size: 18px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.motivation-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.share-btn,
.tips-btn {
  padding: 12px 24px;
  border: 2px solid white;
  border-radius: 25px;
  background: white;
  color: #444444;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.share-btn:hover,
.tips-btn:hover {
  background: transparent;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.share-btn:active,
.tips-btn:active {
  transform: scale(0.95);
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(-5px);
  }
}

@media (max-width: 768px) {
  .milestone-container {
    padding: 15px;
  }
  
  .current-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .milestone-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .motivation-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .stat-card {
    padding: 20px;
  }
  
  .stat-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
  }
  
  .stat-content h3 {
    font-size: 20px;
  }
}
</style>